import { reactive, ref, watch } from "vue";

const state = reactive({ a: 1, b: 2 });
const count = ref(0);

// 1. 一开始不执行，除非传入配置immediate: true
// 2. 传入表达式时，必须传入响应式数据，或函数（此函数会在watch中执行，因此可以收集到依赖）
watch(
  // () => state.a,
  // count,
  [() => state.a, count],
  ([newValue, newValue1], [oldValue, oldValue1]) => {
    console.log("🚀 ~ newValue1, oldValue2:", newValue1, newValue);
    console.log("🚀 ~ watch ~ newValue, oldValue:", oldValue, oldValue1);
  },
  { immediate: true }
);

/*
  注意：无论是watchEffect还是watch，当依赖项变化时，回调函数的运行都是异步的（微队列）
  应用：除非遇到下面的场景，否则均建议选择watchEffect
    不希望回调函数一开始就执行
    数据改变时，需要参考旧值
    需要监控一些回调函数中不会用到的数据
*/
